<template>
	<div class="box">
		<div class="head-fixed">
			<div class="head">
				<div class="head-div"><img src="../assets/zjt2.png" alt="" class="back" @click="back()" /></div>
				<div class="head-search">公司验证</div>
				<div class="head-div" @click="saveLicensePath()">上传审核</div>
			</div>
		</div>
		<div class="content">
			<div class="block">
				<div class="block-left">营业执照</div>
				<div class="block-right">
					<input v-show="false" type="file" accept="image/*" @change="tirggerFile($event)" ref="input" />
					<img src="../assets/yyzz.jpg" v-if="companyinfo.licensePath == null || companyinfo.licensePath==''" alt="" @click="openImg" />
					<img :src="companyinfo.licensePath" alt="" v-if="companyinfo.licensePath != null && companyinfo.licensePath!='' " @click="openImg" />
					<span>点击图片即可上传文件</span>
				</div>
				<!-- <div class="block-right">
					<input v-show="false" type="file" accept="image/*" @change="tirggerFile($event)" ref="input" />
					<img src="../assets/yyzz.jpg" alt="">
					<span>点击图片即可上传文件</span>
				</div> -->
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Actionsheet
	} from 'mint-ui';
	export default {
		inject: ["reload"],
		name: "license",
		components: {
			Actionsheet
		},
		created() {
			// created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
			this.getData();
		},
		mounted() {
			// mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
		},
		// data() 为变量赋值等
		data() {
			return {
				// status为用户身份，0是求职者，1是招聘者
				status: localStorage.status,
				actions: [{
					name: "111"
				}, {
					name: "222"
				}],
				sheetVisible: true,
				companyinfo: '', //公司信息
				licensePath:'',//营业执照
				id:'',//公司信息主键
			};
		},
		// methods 编写js函数
		methods: {
			back() {
				this.$router.go(-1); //返回上一层
			},
			saveLicensePath(){
        this.$router.push({name: 'companyInformation'})//跳转上传审核
				// this.$http({
				// 	method: "get",
				// 	url: "api/company/saveLicensePath",
				// 	params: {
				// 		id:this.id,
				// 		licensePath:this.licensePath,
				// 	},
				// }).then(({
				// 	data
				// }) => {
				// 	console.log(data);
				//
				// });
			},
			getData() {
				this.$http({
					method: "get",
					url: "api/company/companyinfo",
					params: {
						userId: window.localStorage.getItem("userId"),
					},
				}).then(({
					data
				}) => {
					console.log(data);
					this.companyinfo = data;
					this.id = data.id;
				});
			},
			tirggerFile: function (event) {
			  let file = event.target.files[0];
			  let url = "";
			  var reader = new FileReader();
			  reader.readAsDataURL(file);
			  let that = this;
			  reader.onload = function (e) {
			    url = this.result.substring(this.result.indexOf(",") + 1);
			    that.imgUrl = "data:image/png;base64," + url;
			    that.companyinfo.licensePath = "data:image/png;base64," + url;
			    that.licensePath = "data:image/png;base64," + url;
				console.log(that.licensePath);
				console.log(that.companyinfo);
				that.$http({
				  method: "POST",
				  url: "api/ycuser/savaportrait",
				  data: {
						"userPortrait":"data:image/png;base64," + url,
						"imgPath":"companyImg/"
				  },
				}).then(data=>{
					console.log(data);
					that.licensePath = data.data.ossgo;

				})
			    // console.log(this.userPortrait);
			  };

			  // setTimeout(function(){alert(this.userPortrait)}, 1000)
			  // console.log(11111111+this.userPortrait);
			  // this.userPortrait = "data:image/png;base64," + url;
			  // this.$http({
			  // 	methods: "post",
			  // 	url: "api/ycuser/imageUpload",
			  // 	params: {
			  // 		'file': event.target.files[0]
			  // 	}
			  // }).then(({data}) => {
			  // 	this.userPortrait = data
			  // })
			},
			openImg() {
			  this.$refs.input.click();
			},
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	html,
	body,
	.tac,
	.box,
	.tab-left,
	.tab-left .el-menu {
		height: 100%;
	}

	.box {
		width: 100%;
		background: rgb(248, 248, 248);
	}

	.head-fixed {
		width: 100%;
		height: 43px;
		position: fixed;
		z-index: 999;
	}

	.head {
		background: #3e63a8;
		color: #fff;
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
	}

	.back {
		width: 14px;
		height: 14px;
	}

	.head div img {
		width: 20px;
		height: 20px;
	}

	.head-search {
		box-sizing: border-box;
		/* width: 80%; */
		flex: 1;
		text-align: center;
		font-size: 14px;
	}

	.head-div {
		width: 15%;
	}

	.content {
		position: relative;
		top: 43px;
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
	}

	.block {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding: 10px;
	}

	.block-left {
		font-size: 14px;
		width: 100px;
		box-sizing: border-box;
	}

	.block-right {
		display: flex;
		flex-flow: column;
		font-size: 12px;
		color: #757575;
	}

	.block-right img {
		width: 250px;
		height: 150px;
		margin-bottom: 10px;
	}
</style>
